import React, { useEffect, useState } from "react";
import axios from 'axios'
import { Sidebar, ProductCard } from 'react-vant';
interface RouterList {
    title: string,
    word: string,
    id: string,
    image: string,
    price: number,
}
interface ListRow {
    title: string,
    word: string,
    id: string,
    image: string,
    price: number,
    children: RouterList[]
}
const List: React.FC = () => {
    const [active, setActive] = useState(0);
    const [datalist, setDatalist] = useState<ListRow[]>([])
    useEffect(() => {
        axios.get('/api/data').then((res) => {
            const resp1 = res.data.data
            setDatalist(resp1)
        })
    }, [])
    return (
        <div>
            {
                datalist.map((item, i) => {
                    return (
                        <Sidebar
                            value={active}
                            onChange={(v) => {
                                setActive(v);
                            }}
                        >
                            <Sidebar.Item title={item.title} key={i}>
                                {
                                    item.children.map((add,i)=>{
                                        return (
                                            <div key={i}>
                                                <ProductCard
                                                    price={add.price}
                                                    desc={add.word}
                                                    title={add.title}
                                                    thumb={add.image}
                                                    key={add.id}
                                                />
                                            </div>
                                        )
                                    })
                                }
                            </Sidebar.Item>
                        </Sidebar>
                    )
                })
            }
        </div>
    )
}
export default List